

<%--
  Author: chengwei
  Date: 2016/5/13
  Time: 13:15
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>管理</title>
    <link rel="stylesheet" href="/resource/bootstrap/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <%--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">--%>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/resource/js/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/resource/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs" id="columnList">
                <%--<c:forEach items="${column}" var="item" varStatus="i">--%>
                    <%--<li role="presentation"><a href="javascript:void (0);" onclick="onClickColumn(${i.index},'${item.column_id}');">${item.name}</a></li>--%>
                <%--</c:forEach>--%>
            </ul>
        </div>
        
    </div>
    
    <div class="row">
        <div class="col-md-3">
            <div class="list-group" id="left_menu"></div>
        </div>
        <div class="col-md-9" id="main_show"></div>
    </div>
</div>

<script>
    $(function() {
        //加载栏目
        $.post("/column/col",{},function(d) {
            var html = "";
            $.each(d.column, function (i, item) {
                html += "<li role='presentation'><a href='javascript:void (0);' onclick=\"onClickColumn("+i+",'"+item.columnId+"');\">"+ item.name +"</a></li>";
            });
            $("#columnList").html(html);
            onClickColumn(0,"909fdf17df80461ebbacc66839090f7f");
        });
    });
    
    function onClickColumn(index,id) {

        //选中点击的栏目
        var $column = $("#columnList li");
        $column.removeClass("active");
        $column.eq(index).addClass("active");
        
        //打开栏目下的构架

        $.post("/sys/ful", {column_id: id}, function (d) {
            var html = "";
            $.each(d.function, function (i, item) {
                html += "<button type='button' onclick=\"openPage('" + i + "','" + item.url + "','"+item.functionId+"');\" class='list-group-item'>" + item.name + "</button>";
            });
            $("#left_menu").html(html);
            if (d.function && d.function.length > 0) {
                $(".list-group-item:eq(0)").addClass("active");
            }
        });
        
    }

    function openPage(i,url,id) {
        var $functions = $("#left_menu button");
        $functions.removeClass("active");
        $functions.eq(i).addClass("active");
        $.post("/sys/fu", {function_id: id},function (d) {
            console.log(d);
            $("#main_show").html($.tostring);
        });
        
//        $("#main_show").load(url + "?function_id=" + id);
//        $("#main_show").html("<iframe width='100%'  onload='setWidthAndHeight();' src='"+url+"' frameborder='0' marginheight='0' marginwidth='0' scrolling='auto' id='ifm' name='ifm'/>");
    }
    
    function showFunction() {
        
    }

    function setWidthAndHeight() {
        var ifm= document.getElementById("ifm");
        var subWeb = document.frames ? document.frames["ifm"].document : ifm.contentDocument;
        if(ifm != null && subWeb != null) {
            ifm.height = subWeb.body.scrollHeight;
            ifm.width = subWeb.body.scrollWidth;
        }
    }
    
</script>
<script>
    
</script>
</body>
</html>
